<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  </head>
  <body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 DELETE 请求</button>

    <script>
        const buttons = document.querySelectorAll('button')
  

        //get 请求
        buttons[0].onclick = async ()=>{
            try{
        const response = await axios.get('http://localhost:3000/movie',{
            params:{
                id:1,
                name:'aa'
            }
        })
        console.log(response.data);
        }catch(error){
          console.log(error);
          alert(error.message)
        }
      } 

      //添加
      buttons[1].onclick = async()=>{
        const response = await axios().post('http://localhost:3000/movie','name=荒野求生&director=贝爷')
      }

      //更新
      buttons[2].onclick = async()=>{
        const response = await axios().put('http://localhost:3000/movie/9',{
            name:'荒野生存12',
            director:'贝爷12'
        })
      }

      //删除
      buttons[3].onclick = async()=>{
        const response = await axios().delete('http://localhost:3000/movie/13','name=荒野求生&director=贝爷')
      }



      //  // get请求
      //  buttons[0].onclick = async () => {
      //   try {
          
      //     const response = await axios.get(`http://localhost:3000/movie`, {
      //       params: {
      //         id: 1,
      //         name: 'aa'
      //       }
      //     })
      //     console.log(response.data)
      //   } catch (error) {
      //     console.log(error)
      //     alert(error.message)
      //   }
      // }

      // // 添加
      // buttons[1].onclick = async () => {
      //   const response = await axios.post('http://localhost:3000/movie', 'name=野外生存记&director=贝爷')
      //   console.log(response.data)
      // }

      // // 更新 
      // buttons[2].onclick = async () => {
      //   const response = await axios.put('http://localhost:3000/movie/9', { // 内部会自动转换为Json, 并指定相应Content-Type请求头
      //       name: '野外生存记15',
      //       director: '贝爷15'
      //     })
      //   console.log(response.data)
      // }

      // // 删除
      // buttons[3].onclick = async () => {

      //   const response = await axios.delete('http://localhost:3000/movie/13')
      //   console.log(response.data)
      // }





</script>
</body>
</html>